<template>
  <div>
    <!-- 视频主页 -->
    <div>
      <van-nav-bar title="视频" left-arrow @click-left="onClickLeft" />
    </div>
    <!-- 视频主页  头部板块 -->
    <div class="video_index_Titel">
      <div class="video_indexTitelU">
        <ul>
          <li v-for="(item,index) in  ListV" :key="index" @click="startMouser()">
            <div>
              <img class="tupian" :src="item.url" />
            </div>
            <div>
              <span class="video_text">游钓中国第七</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 视频展示板块 -->
    <van-tabs color="black">
      <van-tab title="最新" >
        <div class="father" @click="onClick" v-for="(item,index) in VideoList" :key="index">
          <!--视频-->
          <div class="video_img">
            <img :src="item.url" />
          </div>
          <div class="video_p">
            <p v-text="item.title"></p>
          </div>
          <br />
          <!--作者点赞评论-->
          <div class="video_p_two">
            <div>
              <p v-text="item.name"></p>
            </div>

            <div class="video_dianzan">
              <p class="videoP">
                <van-icon  class="video_IconSpan" name="more" color="#DCDCDC" />
                <span v-text="item.sum"></span>
              </p>
              <p >
                <van-icon  class="video_IconSpan" name="good-job" color="#DCDCDC" />
                <span v-text="item.num">856</span>
              </p>
            </div>
          </div>
          <van-divider />
        </div>
        <!-- <van-divider /> -->
      </van-tab>
      <van-tab title="最热" >
        <div class="father" v-for="(item,index) in VideoList" :key="index">
          <!--视频-->
          <div class="video_img">
            <img :src="item.url" />
          </div>
          <div class="video_p">
            <p v-text="item.title"></p>
          </div>
          <br />
          <!--作者点赞评论-->
          <div class="video_p_two">
            <div>
              <p v-text="item.name"></p>
            </div>

            <div class="video_dianzan">
              <p class="videoP">
                <van-icon class="video_IconSpan" name="more" color="#DCDCDC" />
                <span v-text="item.sum"></span>
              </p>
              <p>
                <van-icon  class="video_IconSpan" name="good-job" color="#DCDCDC" />
                <span v-text="item.num">856</span>
              </p>
            </div>
          </div>
          <van-divider />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //头部 轮播
      ListV: [
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '游钓中国第七'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '游钓中国第七'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '游钓中国第七'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '游钓中国第七'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '游钓中国第七'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '游钓中国第七'
        },
        {
          url:
            'https://pic4.zhimg.com/v2-588b5a5dd202c4ec9c7f258df5df2f79_r.jpg',
          txt: '游钓中国第七'
        }
      ],
      //视频列表
      VideoList: [
        {
          url: 'static/images/01.png',
          title:
            '《谷阿拉斯加的法律实践案例》撒旦垃圾分类收集弗兰克数据的离开房间啊',
          name: '谷麦钓手石头',
          sum: '865',
          num: '622'
        },
         {
          url: 'static/images/01.png',
          title:
            '《谷阿拉斯加的法律实践案例》撒旦垃圾分类收集弗兰克数据的离开房间啊',
          name: '谷麦钓手石头',
          sum: '865',
          num: '622'
        }
      ]
    };
  },
  methods: {
    //用于主体部分 用户点击之后跳到详细页面
    onClick(name, title) {
      // Toast(title);
      this.$router.push({
        name: '视频详情'
      });
    },
    //头部事件用于 用户点击之后显示其它页面
    startMouser() {},
    //导航 大于图标用于返回主页面
    onClickLeft() {
      this.$router.push({
        name: '首页'
      });
    }
  }
};
</script>
<style>
.tupian {
  widows: 70px;
  height: 70px;
  border-radius: 3px;
}
.video_index_Titel {
  height: 10rem;
  overflow: scroll;
}
.video_indexTitelU {
  margin-left: 15px;
  margin-top: 5px;
  width: 200%;
}
li {
  display: inline-block;
  margin-left: 5px;
}
.video_text {
  font-size: 11px;
}
.father {
  width: 90%;
  margin: 0 auto;
  /* color: darkgray; */
}
.video_img {
  text-align: center;
}
.video_p {
  font-size: 1.5rem;
}
.video_p_two {
  border: 0px solid;
  display: flex;
  width: 100%;
}
/* .video_p_two div p{
  float: left;
} */
.video_dianzan {
  /* border: 1px soslid red; */
  display: flex;
  position: relative;
  left: 22rem;
}
.video_IconSpan{
  vertical-align:bottom;
  /* margin-top: ; */
  /* border: 1px solid ; */
}
.videoP{
  /* border: 1px solid; */
  padding-right: 20px;
  margin-left: -50px;
  /* margin-left: 10px; */
}
</style>

